<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'home' }">校外教师</el-breadcrumb-item>
            <el-breadcrumb-item>实践过程任务</el-breadcrumb-item>
            <el-breadcrumb-item>发布过程任务</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">发布过程任务</h2>

        <div style="margin: 3% 5% 3% 5%;">
            <h1 style="margin: 10px;">详细信息</h1>

            <el-form :model="form" label-width="20%" size="large">
                <el-form-item label="题目名称">
                    <el-input v-model="innerPublish.processName" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="班级">
                    <el-select v-model="innerPublish.practicalId" placeholder="选择班级">
                        <el-option v-for="item in classNum" :key="item.practicalId" :label="item.className"
                            :value="item.practicalId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="实践时间">
                    <el-col :span="6">
                        <el-date-picker v-model="innerPublish.startDate" type="date" placeholder="Pick a date"
                            value-format="YYYY-MM-DD" style="width: 100%" />
                    </el-col>
                    <el-col :span="1" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="6">
                        <el-date-picker v-model="innerPublish.endDate" type="date" placeholder="Pick a date"
                            value-format="YYYY-MM-DD" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="报告类型">
                    <el-radio-group v-model="innerPublish.processType" class="ml-4">
                        <el-radio label="0">过程任务</el-radio>
                        <el-radio label="1">最终报告</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="互评时间" v-if="innerPublish.processType == 1">
                    <el-col :span="6">
                        <el-date-picker v-model="innerPublish.scoreStart" type="date" placeholder="Pick a date"
                            value-format="YYYY-MM-DD" style="width: 100%" />
                    </el-col>
                    <el-col :span="1" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="6">
                        <el-date-picker v-model="innerPublish.scoreEnd" type="date" placeholder="Pick a date"
                            value-format="YYYY-MM-DD" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="实践内容">
                    <el-input v-model="innerPublish.content" type="textarea" style=" width: 50%;" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="publish" style="background-color: #545c64;">发布</el-button>
                    <el-button @click="toprocessTask">返回</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>
<script setup>
import { ref,onBeforeMount } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import requests from '@/api/ajax';

onBeforeMount(()=>{
    const asd = requests({ url: "/outer/outerClass", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    classNum.value = abc

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

const classNum = ref([
    {

    }
])

//页面跳转到查看过程任务
const router_useRouter = useRouter()

function publish(){
    const acd = requests({ url: "/inner/processTask", method: "post", data: innerPublish.value}).then(res => {
    //存储用户信息到浏览器toke
    if(res.code === 20011){
        alert('发送成功')
        router_useRouter.push({ path: 'outProTask' })
    }

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    })
}


function toprocessTask() {
  router_useRouter.push({ path: 'outProTask' })
}
const innerPublish = ref({

})
</script>